<script setup lang="ts" name="l-button">
	import { computed } from "vue";
	// 接收参数 const props =
	const props = withDefaults(
		defineProps<{
			backgroundColor ?: string;
			borderRadius ?: string;

			modelValue ?: string;
			value ?: string;
			// lineHeight ?: string,
			size ?: string;
			type ?: string;
			disabled ?: boolean;
		}>(),
		{
			// backgroundColor: () => '#fff',
			borderRadius: () => "4px",

			modelValue: "",
			value: "",
			size: "normal",
			type: "primary",
			
			disabled: false,
		}
	);

	// 计算属性
	const buttonText = computed(() => {
		return props.value || props.modelValue || "Button";
	});
	
	// 回调
	function change() {
		if(props.disabled) return;
		emit('change', buttonText.value)
	}

	// 回调
	const emit = defineEmits(["change"]);
</script>

<template>
	<div class="l-button" :class="[disabled ? 'disabled' : type, size ]" :style="{ borderRadius }" @click="change">{{ buttonText }}</div>
</template>

<style lang="scss" scoped>
	.l-button {
		cursor: pointer;
		text-align: center;
		
		&.disabled {
			cursor: not-allowed !important;
			color: white;
			background-color: #BFBFBF;
			border: 1px solid #BFBFBF;
		}

		&.primary {
			color: white;
			background: #5173F2;
			border: 1px solid #5173F2;

			&:hover {
				background: #79bbff;
				border-color: #79bbff;
			}

			&:active {
				background: #337ecc;
				border-color: #337ecc;
			}
		}
		
		&.primary-plain {
			color: #5173F2;
			border: 1px solid #5173F2;
		
			&:hover {
				color: white;
				background: #5173F2;
				border-color: #5173F2;
			}
		
			&:active {
				background: #337ecc;
				border-color: #337ecc;
			}
		}
		
		&.warning {
			color: white;
			background: #ff9b19;
			border: 1px solid #ff9b19;

			&:hover {
				background: #eebe77;
				border-color: #eebe77;
			}

			&:active {
				background: #b88230;
				border-color: #b88230;
			}
		}

		&.warning-plain {
			color: #ff9b19;
			border: 1px solid #ff9b19;

			&:hover {
				color: white;
				background: #ff9b19;
			}

			&:active {
				background: #b88230;
				border-color: #b88230;
			}
		}

		&.info-plain {
			color: #999999;
			border: 1px solid #CCCCCC;

			&:hover {
				color: #5173F2;
				border: 1px solid #5173F2;
				// background: #909399;
			}

			&:active {
				// 	color: white;
				// 	background: #73767A;
				// 	border-color: #73767A;
			}
		}
	
		
		// 大小
		&.normal {
			line-height: 40px;
			font-size: 16px;
			color: white;
		}
		
	}
</style>